<template>
  <el-row class="main">
    <el-col :span="16" :xl="16" :lg="12" :md="24" :sm="24" :xs="24" class="left">
      <div style="
          font-size: 50px;
          font-weight: 800;
          color: #fff;
          margin-bottom: 16px;
        ">
        欢迎光临
      </div>
      <div style="font-size: 18px; color: rgba(255, 255, 255, 0.8)">
        <span style="font-weight: 800; color: #fff">qzb</span>的空间
      </div>
    </el-col>
    <el-col :span="8" :xl="8" :lg="12" :md="24" :sm="24" :xs="24" class="right">
      <div class="right-In">
        <div style="font-size: 35px; font-weight: 900">欢迎回来</div>
        <el-divider style="margin: 30px 0">
          <span style="font-size: 20px; font-weight: 700; color: rgba(0, 0, 0, 0.6)">账号密码登录
          </span>
        </el-divider>
        <el-form ref="ruleFormRef" style="width: 100%" :model="accoutForm" status-icon :rules="rules"
          label-width="auto">
          <el-form-item prop="username">
            <el-input v-model="accoutForm.username" placeholder="请输入用户名" autocomplete="off" clearable>
              <template #prefix>
                <el-icon>
                  <User />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="accoutForm.password" type="password" placeholder="请输入密码" autocomplete="off" show-password
              clearable>
              <template #prefix>
                <el-icon>
                  <Lock />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button style="width: 100%" round type="primary" @click="submitForm" :loading="loading">
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-col>
  </el-row>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import { useRouter } from "vue-router";
import { toast } from "@/composables/utils";
import { useInfoStore } from "../store";
const router = useRouter();
const ruleFormRef = ref(null);
const userStore = useInfoStore();
const accoutForm = ref({
  username: "",
  password: "",
});
const loading = ref(false);
// 表单校验
const rules = ref({
  username: [
    {
      required: true,
      message: "用户名不能为空",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: "密码不能为空",
      trigger: "blur",
    },
  ],
});
// 提交表单
const submitForm = () => {
  ruleFormRef.value.validate((valid) => {
    // valid参数是点击后用户账号输入框和密码输入框的校验结果
    if (!valid) {
      return false;
    }

    // 在验证通过之后，在请求之前，把loading 的状态设置为 true。
    loading.value = true;

    /** 调用pinia的toLogin进行登录 */
    userStore.toLogin(accoutForm.value).then(res => {
      router.push("/");
      toast("登录成功", "success");
    }).finally(() => {
      loading.value = false;
    })
  });
}
/**
 * 监听回车事件
 */
function watchEnter(event) {
  if (event.key === 'Enter') {
    submitForm();
  }
}
// 页面挂载阶段
onMounted(() => {
  // 添加键盘监听
  document.addEventListener("keyup", watchEnter);
})
// 移除监听
onBeforeUnmount(() => {
  document.removeEventListener("keyup", watchEnter)
})
</script>
<style scoped lang="scss">
.main {
  display: flex;
  width: 100%;
  height: 100vh;

  :deep(.el-divider__text) {
    @apply bg-gray-100;
  }

  .left {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #606ff6;
  }

  .right {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .right-In {
      width: 70%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
  }
}
</style>
